<template>
  <div class="tabbar">
    <ul>
      <li 
         v-for='(item,index) in routerList'
         :key="index"
      >
        <img src="../../assets/images/首页.png" alt="" />
        <span>首页</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   data(){
      return {
         routerList:[
            {
               title:"首页",
               path:"./home",
               active:'./images/首页.png',
               selected:'./images/首页-选中.png'
            },
            {
               title:"列表",
               path:"./list",
               active:'./images/列表_o.png',
               selected:'./images/列表.png'
            },
            {
               title:"购物车",
               path:"./cart",
               active:'./images/购物车空.png',
               selected:'./images/购物车满.png'
            },
            {
               title:"我的",
               path:"./mine",
               active:'./images/我的.png',
               selected:'./images/我的-选中.png'
            },
         ]
      }
   }
};
</script>

<style lang="less" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 1.6rem;
  & ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
   & li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    & img {
        width: 0.726666rem;
        height: 0.726666rem;
      }
    & span{
       font-size: .4rem;
    }
    }
  }
}
</style>